<template>
    <div class="box box7">
        <!-- <ImmersiveNavbar title="眨眨眼" /> -->
        <div @click="goToBox6" class="image-1"></div>
        <img class='image' :src="bgImg" alt="">
        <div class="info-bar">
            <span class="info">{{ infomation }}</span>
        </div>
        <div class="box08" @click="goToBox8">跳转</div>
    </div>
</template>


<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import bgImg from '@/assets/img/08.jpg'
import { onMounted } from 'vue'
import bgImg from '@/assets/img/box7.png'
import { StorageUtils } from '@/utils/storage.js'
// const infomation = ref('**蓉、**************0026')
// const infomation = ref('*岩、**************1013')
const infomation = ref('**杰、**************2050')
// 330204197011150026
// import ImmersiveNavbar from '@/components/ImmersiveNavbar.vue'

onMounted(() => {
    // 首次进入标记已访问，且不做自动跳转，避免从 Box6 点击后立即跳到 Box9
    StorageUtils.setData('box6_seen', true)
})

const router = useRouter()
function goToBox6() { router.push('/box6') }
function goToBox8() {
    router.replace('/box8')
}
</script>

<script>
/* global plus */

export default {
    name: 'BoxSeven',
    data() {
        return {

        }
    },
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
        // 设置沉浸式状态栏：深色文字，浅色背景，避免与图片重合
        this.setStatusBarForBox7()
        // 确保在 plus 环境就绪后再次设置，避免 mounted 早于 plusready 的情况
        document.addEventListener('plusready', this.handlePlusReady)
    },
    methods: {
        handlePlusReady() {
            this.setStatusBarForBox7()
        },
        setStatusBarForBox7() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('dark')
                    plus.navigator.setStatusBarBackground('#ffffff')
                } catch (e) {
                    // ignore
                }
            }
        },
        restoreStatusBarDefault() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('light')
                    // 透明背景，按需调整
                    plus.navigator.setStatusBarBackground('#00000000')
                } catch (e) {
                    // ignore
                }
            }
        },
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box6');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        handleTouchStart(e) {
            this.startX = e.touches[0].clientX
            this.startY = e.touches[0].clientY
        },
        handleTouchEnd(e) {
            const endX = e.changedTouches[0].clientX
            const endY = e.changedTouches[0].clientY
            const deltaX = endX - this.startX
            const deltaY = endY - this.startY
            if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
                if (deltaX > 0) {
                    this.goPrev()
                } else {
                    this.goNext()
                }
            }
        },
        goPrev() {
            this.$router.push('/box6')
        },
        goNext() {
            this.$router.push('/box8')
        }
    },
    beforeUnmount() {
        // 移除监听
        document.removeEventListener('plusready', this.handleBackButton);
        document.removeEventListener('plusready', this.handlePlusReady);
        // 还原状态栏样式，避免影响其他页面
        this.restoreStatusBarDefault()
    }
}
</script>

<style scoped lang="less">
.box08 {
    position: absolute;
    width: 100vw;
    height: 50px;
    /* background-color: red; */
    opacity: 0;
    top: 507.771px;
    left: 0;
    z-index: 100;

}

.info-bar {
    width: 100vw;
    height: 20px;
    position: absolute;
    top: 225px;
    left: 0;
    line-height: 20px;
    background-color: rgb(255, 254, 254);
    display: block;
    z-index: 1000;

    .info {
        font-size: 14.5px;
        color: #CFCFCF;
        font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
}

.box {
    position: relative;
    width: 375px;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    background: #fff;
    padding-top: 44px;
}

.image {
    width: 375px;
    /* transform: translateY(-20px); */
    position: relative;
    z-index: 1;
}

.image-1 {
    position: absolute;
    width: 40px;
    height: 40px;
    /* background-color: rgb(50, 44, 45); */

    /* opacity: 0.1; */
    top: 100.303px;
    left: 15px;
    z-index: 99;
}
</style>